<?php include PATH_TPL."/admin/tpl.header.phtml"?>
<div class="main-container inner">
    <div class="main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 bg">
                    <ol class="breadcrumb">
                        <li class="active">
                            <i class="fa  fa-fw fa-reorder"></i>添加课程
                        </li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <ul id="course-tab" class="nav nav-tabs">
<!-- 基础信息标签页-->
                        <li class="active"> 
                            <a href="#course-basic" data-toggle="tab">基础信息</a> 
                        </li>
<!--课程列表标签页   -->
                        <li>
                            <a href="#course-list" data-toggle="tab">课程列表</a> 
                        </li>
                    </ul>
                </div>
            </div>


<form action="" method="post" enctype="multipart/form-data">
        <div id="course-content" class="tab-content">
<!-- 课程基础信息内容页 -->
            <div id="course-basic" class="tab-pane fade in active">
                <div class="container-fluid col-md-7 col-sx-12">
                        <div class="form-group ">
                            <label for="title">课程标题</label>
                            <input type="text" placeholder="输入课程标题" id="title" class="form-control" name="title">
                        </div>
                        <div class="form-group ">
                            <!--<div class="form-control"><label for="cate_id">类别</label></div>-->
                            <label>类别</label><br>
                            <div class="col-md-6 left-padding-0">
                                <select class="form-control" id="sort1" name="sort1">
                                <option value="">=请选择=</option>
<?foreach($tCADatas as $tCARow){ if($tCARow['pid']==0){?>
<option value="<?=$tCARow['id']?>"><?=$tCARow['name']?> </option>
<?}}?>
                                </select></div>
                            <div class="col-md-6 left-padding-0 right-padding-0">
                                <select class="form-control" id="sort2" name="sort2">
                                <option value="">=请选择=</option>
                                </select></div>
                                <div class="clear"></div>
                        </div>
                        <div class="form-group">
                            <label for="img">课程封面图片(宽190x高164)</label>
                            <input type="file" id="file_input" name="img">
                        </div>
                        <div class="form-group">
                            <label for="descriptions">课程简介(选填)</label>
                            <textarea id="descriptions" style="height:100px;resize:none;" class="form-control" name="descriptions" placeholder="输入描述"></textarea>
                        </div>

                        <div class="form-group ">
                            <label for="name">讲师名称</label>
                            <input type="text" placeholder="输入讲师名称搜索" id="name" class="form-control" name="name">
                            <input type="hidden" id="lecturer_id" class="form-control" name="lecturer_id">
                        </div>
                        <div class="form-group">
                            <label for="credit">课程学分(选填)</label>
                            <input type="text" placeholder="课程学分" id="credit" class="form-control" name="credit">
                        </div>
                        <div class="form-group">
                            <label for="credit">初始化已学人数</label>
                            <input type="text" placeholder="已学人数" id="initview" class="form-control" name="initview">
                        </div>

<?php
/*
                        <div class="form-group">
                            <label for="tag">标签&nbsp;&nbsp;&nbsp;</label><br>
                            <input type="checkbox" name="tag" value="1" >医生必修&nbsp;&nbsp;&nbsp;
                            <input type="checkbox" name="tag" value="2" >临床实操&nbsp;&nbsp;&nbsp;
                            <input type="hidden" name="tags" id="tags">
                        </div>
 */
?>

                </div>
                <div class="container-fluid col-md-5">
                    <div class="images text-center" id="img_view">
                    </div>
                </div>
            </div> <!-- raper-->

<!-- 课程列表内容页 -->
            <div id="course-list" class="tab-pane fade">
                <div class="container-fluid col-md-12 col-sx-12 min-height-500" id="course-area">
                    <div class="form-group">
                        <a href="#" class="btn btn-default" id="addcourse" > 添加目录</a>
                    </div>
                    <input type="hidden" id="cours" name="cours">
                    <div class="form-group left-padding-0">
                        <label class="float margin-top-7" >名称:</label>
                        <div class="col-md-3"><input type="text" name="courses"  class="form-control" ></div> 
                        <label class="float margin-top-7">时长:</label>
                        <div class="col-md-3"><input type="text" name="courses" class="form-control"></div> 
                        <label class="float margin-top-7">视频地址:</label>
                        <div class="col-md-3"><input type="text" name="courses" class="form-control"></div> 
                       <a class="btn btn-sm delete">删除</a>
                    </div> 
                </div>
            </div>
        </div>   <!-- course-content-->
    <div class="col-md-2 col-md-offset-5  ">
    <button class="btn form-control btn-primary demo_2" type="button" id="submit">保存</button>
    </div>
</form>
        </div>
        <div class="subviews">
            <div class="subviews-container"></div>
        </div>
    </div>

    <!-- end: PAGE -->
</div>
<!-- end: MAIN CONTAINER -->
<script type="text/javascript" src="/plugins/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>
$(function(){
    //提交    
    var options={
        beforeSubmit : showRequest,    // 提交前的回调函数
        success : showResponse,    // 提交后的回调函数
        dataType : "json",    // html（默认）、xml、script、json接受服务器端返回的类型
        timeout : 3000    // 限制请求的时间，当请求大于3秒后，跳出请求
    }
    function showRequest(formData, jqForm, options){
        return true;
    }
    function showResponse(responseText,statusText){
        cg_alert_add(responseText,'/admin_course','/admin_course/add2');
    }
    $('#submit').click(function() {
        //复选框取值到隐藏域
        getcks();
        //课程目录取值到隐藏域
        getcours();
        $('form').ajaxSubmit(options);
        return false;

    });
    //获取课程组值
    function getcours(){
        var values = "";
        var count=0;
        $('input[name="courses"]').each(function(){
            count++;
            values += ','+$(this).val(); 
        });
        var value = values.substring(1);
        if(count%3==0){
        $('#cours').val(value); 
        }else{
        $('#cours').val(""); 
        } 

    
    }
//获取复选框值
    function getcks(){
        var checks = "";
        $("input[name='tag']:checked").each(function(){
            checks += ','+$(this).val(); 
        });
        if(checks.length != 0){
            var check = checks.substring(1);
            $('#tags').val(check);
        }else{
            $('#tags').val("");
        }

    }
    /*
        //下拉分类
        sort1=[{"s1Id":1,"s1Name":"基础必修"},{"s1Id":2,"s1Name":"精英提高"},{"s1Id":3,"s1Name":"情报服务"},{"s1Id":4,"s1Name":"系列课程"}];
        sort2=[{"s2Id":1,"s2Name":"医生班","s1Id":1},{"s2Id":2,"s2Name":"护士班","s1Id":1},{"s2Id":3,"s2Name":"技师班","s1Id":1},{"s2Id":4,"s2Name":"管理班","s1Id":1},{"s2Id":5,"s2Name":"通路手术","s1Id":2},{"s2Id":6,"s2Name":"临床实操","s1Id":2},{"s2Id":7,"s2Name":"血透管理","s1Id":2}];
        $.each(sort1,function(k,v){
            var option = "<option value='" + v.s1Id + "'>" + v.s1Name + "</option>";
            $("#sort1").append(option);
        });
        //省份改动后改变城市    
        $('#sort1').change(function(){
            //获取新的省份id的值，并清空城市列表
            var s1Value = $(this).val();
            $("#sort2 option:gt(0)").remove();
            //遍历输出城市列表
            $.each(sort2,function(k,v){
                //如果城市对象的省份id与当前省份id相同，添加到列表
                if(v.s1Id == s1Value){
                    var option = "<option value='" + v.s2Id + "'>" + v.s2Name + "</option>";
                    $("#sort2").append(option);
                }
            }); 
        });
     */
        //从数据库中拉数据
       $('#sort1').change(function(){
            //获取新的省份id的值，并清空城市列表
            var s1Value = $(this).val();
            $("#sort2 option:gt(0)").remove(); 
            $.post("/admin_course/getSort2",{"sort1Id":s1Value},function(obj){
            if(obj.status==1) {
                    $.each(obj.data,function(k,v){
                     var option = "<option value='" + v.id + "'>" + v.name + "</option>";
                    $("#sort2").append(option);
    
                    })
            }
            
            });
            //遍历输出城市列表
        });

        //标签页控制
        $('#course-tab a').click(function(){
            e.preventDefault();
           $(this).tab('show'); 
        
        });
        
        //添加课程目录
        $('#addcourse').click(function(){
                $('#course-area').append("<div class=\"form-group left-padding-0\"><label class=\"float margin-top-7\" >名称:</label><div class=\"col-md-3\"><input type=\"text\" name=\"courses\" class=\"form-control\" ></div> <label class=\"float margin-top-7\">时长:</label><div class=\"col-md-3\"><input type=\"text\" name=\"courses\" class=\"form-control\"></div> <label class=\"float margin-top-7\">视频地址:</label><div class=\"col-md-3\"><input type=\"text\" name=\"courses\" class=\"form-control\"></div> <a class=\"btn btn-sm delete\">删除</a></div> "); 
                $('#course-area a.delete').off('click').on('click',function(){
                    $(this).parent().remove(); 
                });
        });
        
    //删除课程目录
        $('#course-list a.delete').click(function(){
            $(this).parent().remove(); 
        });
        //FileReader显示素略图
        var result = document.getElementById("img_view");
        var input = document.getElementById("file_input");
        if(typeof FileReader==='undefined'){
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
        }
        function readFile(){
           var file = this.files[0];
           if(!/image\/\w+/.test(file.type)){
               alert("文件必须为图片！");
               return false;
           }
           var reader = new FileReader();
           reader.readAsDataURL(file);
           reader.onload = function(e){
               result.innerHTML = '<img src="'+this.result+'" alt="" width="400px"/>'
           }
        }

});

</script>
<?php include PATH_TPL."/admin/tpl.footer.phtml"?>
